<template>
    <div style="width: 100%;height: 100%;background-color: white">
        <div style="margin-left: 80px;">
        <el-tree
                :data="data2"
                node-key="id"
                ref="tree"
                show-checkbox
                :default-expanded-keys="[1,5,6]"
                :default-checked-keys="arrs"
                :props="Authorities"
                :expand-on-click-node="false"
                >
        </el-tree>
            <el-button type="primary" style="margin-top: 20px" @click="saveDataToServer">确认修改</el-button>
        </div>
    </div>

</template>

<script>

export default {
    data() {
        return {
            checked:'',
            data2: [],
            arrs:[],
            Authorities: {
                id: 'id',
                label: 'name',
                children: 'children',
                url: "url",
                parentId: "parentId",
            },
        };
    },
    mounted() {
        //查询所有节点
        this.data2 = this.getAllPermission();
        // 查询改角色有的角色
        this.getDataFromServer();
    },
    methods: {
        // append(data) {
        //     //模态框弹出
        //     this.$prompt('请输入权限名称', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //     }).then(({value}) => {
        //         //确认回调
        //         console.log(data)
        //         const newChild = {id: 20, label: value, children: []};
        //         if (!data.children) {
        //             this.$set(data, 'children', []);
        //         }
        //             data.children.push(newChild);
        //         }).catch(() => {
        //             //取消回调
        //             this.$message({
        //                 type: 'info',
        //                 message: '取消添加'
        //             });
        //         });
        //
        //     },

        // remove(node, data) {
        //     console.log(data)
        //     if (data.children != undefined && data.children.length != 0) {
        //         this.$message({
        //             message: '请先删除子节点',
        //             type: 'warning'
        //         });
        //     } else {
        //         this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        //             confirmButtonText: '确定',
        //             cancelButtonText: '取消',
        //             type: 'warning'
        //         }).then(() => {
        //             this.$message({
        //                 type: 'success',
        //                 message: '删除成功!'
        //             });
        //             const parent = node.parent;
        //             const children = parent.data.children || parent.data;
        //             const index = children.findIndex(d => d.id === data.id);
        //             children.splice(index, 1);
        //         }).catch(() => {
        //                 this.$message({
        //                     type: 'info',
        //                     message: '已取消删除'
        //                 });
        //             });
        //
        //         }
        //     },
        getDataFromServer() {
            // 从服务的加载数的方法。
            // 发起请求
            //根据角色id，查询权限列表
            const roleId =this.$route.query.id;
            this.$http.get("/role/of/authority?id="+roleId).then(resp => { // 这里使用箭头函数
                const permiss = [];
                for (let i in resp.data) {
                    if (resp.data[i].parentId != 0){
                        permiss.push(resp.data[i].id)
                    }
                }
                this.arrs = permiss;
            })
        },
        saveDataToServer(){
            const roleId =this.$route.query.id;
            const pids = this.$refs.tree.getHalfCheckedKeys().concat(this.$refs.tree.getCheckedKeys());
            console.log("aaaaaaaaaaaaaaapids")
            console.log(pids)
            //直接传数组不行，要变成字符串才可以
            const ids = pids.map(a=>a).join(",");
            const params = {rid:roleId,ids:ids}
            this.$http.put("/role/authority/update", this.$qs.stringify(params)).then(resp => { // 这里使用箭头函数
                this.$message.success("保存成功")
                this.$router.push("/auth/role")
            }).catch(() => {
                this.$message({
                    type: 'warning',
                    message: '保存失败'
                });
            });
        },
        getAllPermission() {
            this.$http.get("/authority/of/parent?pid=0").then(resp => {
                this.data2 =  resp.data;
                console.log(this.data2)
            })
        }
    }
}
</script>
